<template>
  <div class="new-channel">
    <Breadcrumb>
      <BreadcrumbItem v-for="(name, i) in breadcrumb" :key="i">{{ name }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="form">
      <Form ref="formItem" :model="formItem" :label-width="140" label-position="left">
        <Row class="base-form">
          <p>基本信息</p>
          <FormItem prop="companyUuid" label="uuid：">
            {{ companyDetail.companyUuid }}
          </FormItem>
          <FormItem prop="companyName" label="商户名称：">
            {{ companyDetail.companyName }}
          </FormItem>
          <FormItem prop="companyAbbreviation" label="商户简称：">
            {{ companyDetail.companyAbbreviation }}
          </FormItem>
          <FormItem label="商户状态：" prop="status">
            {{ this.selectStatus(companyDetail.status) }}
          </FormItem>
          <FormItem label="商户类型：" prop="companyType">
            {{ this.selectType(companyDetail.companyType) }}
          </FormItem>
          <FormItem label="省份城市：" prop="province">
            {{ pcList[0] + '-' + pcList[1] + '-' + pcList[2] }}
          </FormItem>
          <FormItem prop="address" label="详细地址：">
            {{ companyDetail.address }}
          </FormItem>
          <!-- <FormItem prop="domain" label="域名：">
            {{ companyDetail.domain }}
          </FormItem> -->
          <!-- <FormItem prop="accountName" label="管理员姓名：">
            {{ companyDetail.partnerInfo && companyDetail.partnerInfo.accountName }}
          </FormItem>
          <FormItem prop="telephone" label="管理员账号：">
            {{ companyDetail.partnerInfo && companyDetail.partnerInfo.telephone }}
          </FormItem> -->
          <FormItem prop="introduction" label="公司简介：">
            <div style="width: 80%;">
              {{ companyDetail.introduction }}
            </div>
          </FormItem>
          <!-- <FormItem prop="agencyServiceName" label="分销公众号名称：">
            {{ companyDetail.agencyServiceName }}
          </FormItem> -->
          <div v-for="(item, index) in companyDetail.wxConfigs" :key="index">
            <p>
              微信端信息{{ index !== 0 ? index : '' }}&nbsp;&nbsp;
              <!-- <Button type="success" size="small" v-if="index === 0" @click="addWx">+添加微信配置</Button>
              <Button type="error" size="small" v-else @click="deleteWx">删除</Button> -->
            </p>
            <FormItem prop="appId" label="微信appId：">
              {{ item.appId }}
            </FormItem>
            <FormItem prop="appSecret" label="微信appSecret：">
              {{ item.appSecret }}
            </FormItem>
            <!-- <FormItem prop="saveJs" label="安全域名JS：">
              <Input type="text" readonly v-model="item.saveJs" placeholder="安全域名JS" clearable style="width: 300px;">
                <Upload action="//jsonplaceholder.typicode.com/posts/" slot="append" class="js-com">
                  <Button type="primary" class="upload-js">上传</Button>
                </Upload>
              </Input>
            </FormItem>
            <FormItem prop="webPageJs" label="网页授权JS：">
              <Input type="text" readonly v-model="item.webPageJs" placeholder="网页授权JS" clearable style="width: 300px;">
                <Upload action="//jsonplaceholder.typicode.com/posts/" slot="append" class="js-com">
                  <Button type="primary" class="upload-js">上传</Button>
                </Upload>
              </Input>
            </FormItem> -->
            <div v-if="item.weChatPush === '1'">
              <FormItem label="开通微信推送：" prop="weChatPush">
                {{ item.weChatPush === 1 ? '开通' : '不开通' }}
              </FormItem>
              <FormItem prop="reportTemplateId" label="报备模板ID：">
                {{ item.reportTemplateId }}
              </FormItem>
              <FormItem prop="statusChangeId" label="状态变更ID：">
                {{ item.statusChangeId }}
              </FormItem>
              <FormItem prop="reviewRejectionId" label="审核驳回ID：">
                {{ item.reviewRejectionId }}
              </FormItem>
              <FormItem prop="projectApprovalId" label="项目审批ID：">
                {{ item.projectApprovalId }}
              </FormItem>
            </div>
          </div>

          <p>系统打通信息</p>
          <FormItem label="M2打通：" prop="merchant2">
            {{ companyDetail.merchant2 === '1' ? '是' : '否' }}
          </FormItem>
          <FormItem label="M2参与客户判重：" prop="checkM2Repeat">
            {{ companyDetail.checkM2Repeat === '1' ? '是' : '否' }}
          </FormItem>
          <FormItem label="一二手联动：" prop="outsideSwitch">
            {{ companyDetail.outsideSwitch === '1' ? '是' : '否' }}
          </FormItem>
          <FormItem label="号码验真：" prop="checkSwitch">
            {{ companyDetail.checkSwitch === '1' ? '是' : '否' }}
          </FormItem>
        </Row>
        <Row class="base-table">
          <p>功能授权</p>
          <table cellspacing="0" cellpadding="0" class="function-table">
            <thead>
              <tr>
                <td>功能项</td>
                <td>授权时长</td>
                <td>是否开启</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>是否使用佣金</td>
                <td>-</td>
                <td>
                  {{ companyDetail.commission ? '开启' : '不开启' }}
                </td>
              </tr>
              <tr>
                <td>是否短信提醒</td>
                <td>-</td>
                <td>
                  {{ companyDetail.message ? '开启' : '不开启' }}
                </td>
              </tr>
              <!-- <tr>
                <td>是否开启小程序消息推送</td>
                <td>-</td>
                <td>
                  {{ companyDetail.weappMessage ? '开启' : '不开启' }}
                </td>
              </tr> -->
            </tbody>
          </table>

          <p>LOGO设置</p>
          <table cellspacing="0" cellpadding="0" class="logo-table">
            <thead>
              <tr>
                <td>LOGO位置</td>
                <td>当前LOGO</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in uploadList" :key="index">
                <td>
                  <div class="label">{{ item.label }}</div>
                  <span class="remark">{{ item.remark }}</span>
                </td>
                <td>
                  <viewer :images="item.photoList" class="demo-upload-list-priview">
                    <img v-for="(item1, index1) in item.photoList" :key="index1" :src="item1">
                  </viewer>
                </td>
              </tr>
            </tbody>
          </table>
        </Row>
      </Form>
    </div>
  </div>
</template>

<script>
import Api from '@/api'

const companyApi = Api.Company
const commonApi = Api.Common

export default {
  name: 'channeldetail',
  data() {
    return {
      breadcrumb: ['商户管理', '商户详情'],
      formItem: {},
      depc: [],
      pcList: [],
      statusList: [
        {
          label: '不开通',
          value: '0'
        },
        {
          label: '开通',
          value: '1'
        }
      ],
      sfList: [
        {
          label: '是',
          value: '1'
        },
        {
          label: '否',
          value: '0'
        }
      ],
      MerchantStatus: [
        {
          label: '启用',
          value: '2'
        },
        {
          label: '禁用',
          value: '3'
        },
      ],
      MerchantType: [
        {
          label: '开发商',
          value: 20
        },
        {
          label: '总代公司',
          value: 30
        },
        {
          label: '试用商户',
          value: 40
        },
      ],
      defaultList: [],
      uploadList: [
        {
          label: '渠道PC登录页logo',
          remark: '(建议上传101*69PNG图片)',
          photoList: [],
          fieldName: 'developersLoginLogo'
        },
        {
          label: '渠道PC首页logo',
          remark: '(建议上传200*50PNG图片)',
          photoList: [],
          fieldName: 'developersIndexLogo'
        },
        {
          label: '案场助手登录页logo',
          remark: '(建议上传375*270PNG图片)',
          photoList: [],
          fieldName: 'assistantLoginLogo'
        },
        {
          label: '案场助手首页logo',
          remark: '(建议上传100*66PNG图片)',
          photoList: [],
          fieldName: 'assistantIndexLogo'
        },
        {
          label: '案场助手退出页logo',
          remark: '(建议上传75*75PNG图片)',
          photoList: [],
          fieldName: 'assistantExitLogo'
        },
        {
          label: '分销PC登录页logo',
          remark: '(建议上传101*69PNG图片)',
          photoList: [],
          fieldName: 'agencyLoginLogo'
        },
        {
          label: '分销PC首页logo',
          remark: '(建议上传200*50PNG图片)',
          photoList: [],
          fieldName: 'agencyIndexLogo'
        },
        {
          label: '分销商h5登录页logo',
          remark: '(建议上传166*55PNG图片)',
          photoList: [],
          fieldName: 'h5LoginLogo'
        }
      ],
      companyDetail: {},
    }
  },
  methods: {
    selectStatus(val) {
      let status = ''
      this.MerchantStatus.forEach(item => {
        if (item.value === val) {
          status = item.label
        }
      })
      return status
    },
    selectType(val) {
      let Type = ''
      this.MerchantType.forEach(item => {
        if (item.value === val) {
          Type = item.label
        }
      })
      return Type
    },
    async getDetail() {
      const id = this.$route.query.id
      const { responseCode, data } = await this.$request(companyApi.getCompany, { id })
      if (responseCode === '1') {
        this.depc = [data.province, data.city, data.zone]
        this.getProvince(data.province, data.city, data.zone)
        this.uploadList.forEach(item => {
          if (data[item.fieldName]) {
            item.photoList.push(data[item.fieldName])
          }
        })
        this.companyDetail = data
      }
    },
    async getProvince(province, city, zone) {
      let p = ''
      const { responseCode, data } = await this.$request(commonApi.listProvince)
      if (responseCode === '1') {
        data.forEach((item, index) => {
          if (item.value === province) {
            p = item.label
          }
        })
        this.pcList.push(p)
        this.getCity(province, city, zone)
      }
    },
    async getCity(provinceId, city, zone) {
      let c = ''
      const { responseCode, data } = await this.$request(commonApi.listCity, { provinceId })
      if (responseCode === '1') {
        data.forEach((item, index) => {
          if (item.value === city) {
            c = item.label
          }
        })
        this.pcList.push(c)
        this.getZone(city, zone)
      }
    },
    async getZone(city, zone) {
      let z = ''
      const { responseCode, data } = await this.$request(commonApi.listCity, { provinceId: city })
      if (responseCode === '1') {
        data.forEach((item, index) => {
          if (item.value === zone) {
            z = item.label
          }
        })
        this.pcList.push(z)
      }
    },
  },
  mounted() {
    this.getDetail()
  },
  components: {},
}
</script>
<style lang="scss" scoped>
.new-channel {

  .form {
    background: #fff;
    margin-top: 15px;
    padding: 25px 15px 0;
    border-radius: 5px;

    .ivu-form {
      display: flex;
    }

    .base-form {
      width: 50%;
      border-right: 1px solid #eee;

      .upload-js {
        color: #fff;
        background-color: #2d8cf0;
        border-color: #2d8cf0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }

    .base-table {
      width: 50%;
      padding-left: 50px;


      .function-table, .logo-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 30px;

        thead {
          background: #f1f1f1;
        }

        tr {
          height: 40px;
        }

        td {
          padding: 10px;
          border: 1px solid #D0D0D0;
        }
      }

      .logo-table {
        .label {
          font-size: 15px;
          color: #333;
        }
        .remark {
          color: #999;
        }
        .image {
          width: 100px;
          height: 80px;
        }
        .hf {
          position: relative;
          top: -5px;
        }
      }
    }

    p {
      font-size: 22px;
      font-weight: 600;
      padding-bottom: 10px;
    }

    .on-submit {
      padding: 15px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
